<template>
  <Tag :color="bVal == 0 || bVal == 2 ? 'green' : 'red'">{{ getVal(bVal) }}</Tag>
  <Avatar v-for="pic in picdata" :key="pic" size="large">
    <template #icon>
      <Image alt="暂无照片" :width="100" :height="100" :src="getAvatarView(pic)" />
    </template>
  </Avatar>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    name: 'PicBoolean',
    inheritAttrs: false,
  });
</script>
<script lang="ts" setup>
  import { computed, unref } from 'vue';
  import { Button, Tag, Avatar, Image } from 'ant-design-vue';
  import { PictureOutlined } from '@ant-design/icons-vue';
  import { buttonProps } from './props';
  import { useAttrs } from '/@/hooks/core/useAttrs';
  import { createImgPreview, ImagePreview } from '/@/components/Preview/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useGlobSetting } from '/@/hooks/setting';
  const globSetting = useGlobSetting();
  const { createMessage, createErrorModal } = useMessage();
  import { useUserStore } from '/@/store/modules/user';
import { array } from 'vue-types';
  const userStore = useUserStore();
  const tk = userStore.getToken;
  let picdata: string[] = [];
  const props = defineProps(buttonProps);
  // eslint-disable-next-line vue/no-setup-props-destructure
  const list: any = props.picList || "";
  const piclist = list.replace(/\[|]/g, '').replace(/\"/g, '');
  // eslint-disable-n ext-line vue/no-setup-props-destructure
  if (piclist != '') {
    if (piclist.includes(',')) {
      picdata = piclist.split(',');
    } else {
      picdata.push(piclist);
    }
    console.log(picdata);
  }
  function onClickPreview(pic: string) {
    handlePreview([pic]);
  }
  function getAvatarView(picUrl) {
    if (picUrl != '') {
      return picUrl + '';
    } else {
      return '';
    }
  }
  function getVal(bVal) {
    if (bVal == 0) {
      return '否';
    } else if (bVal == 2) {
      return '不涉及';
    } else {
      return '是';
    }
  }

  function handlePreview(photos: Array<String>) {
    const onImgLoad = ({ index, url, dom }) => {
      console.log(`第${index + 1}张图片已加载，URL为：${url}`, dom);
    };
    const imgList: string[] = [];
    if (photos) {
      photos.forEach((ele) => {
        if (ele)
          imgList.push(`${globSetting.apiBaseUrl}/api/v1/imagesffff/${ele}?access_token=${tk}`);
      });
    }
    if (imgList.length > 0) {
      // 可以使用createImgPreview返回的 PreviewActions 来控制预览逻辑，实现类似幻灯片、自动旋转之类的骚操作
      createImgPreview({
        imageList: imgList,
        defaultWidth: 700,
        rememberState: true,
        onImgLoad,
      });
    } else {
      createErrorModal({ title: '提示', content: '暂无图片' });
    }
  }

  // get inherit binding value
 // const getBindValue = computed(() => ({ ...unref(attrs), ...props }));
</script>
